<template>
    <div class="pad">
        <!-- search start  -->
        <!--<searchBar/>-->
        <!-- search end -->
        <!-- table start -->
        <tableDataEl
                :page.sync="page"
                :pageSize.sync="pageSize"
                :tableData="tableData.list"
                :tableLabel="tableLabel"
                :pageCount="tableData.rows"
                ImgText="支付凭证"
                @handleDetail="handleDetail"
                height="89vh"
                v-loading="loading"
        />
        <!-- table end -->
        <!-- dialog start -->
            <el-dialog
                :visible.sync="isShowDetail"
                center
                title="操作"
                top="13vh"
                width="40%"
                v-el-drag-dialog
            >
                <el-form label-width="80px" label-position="top">
                    <el-form-item
                            v-for="(item,index) in obj.mate"
                            :label="item.materiel + ' /件'"
                            :key="index"
                    >
                        <el-input v-model="item.num"></el-input>
                    </el-form-item>
                    <div style="text-align:center;">
                        <el-button type="primary" @click="through">通过</el-button>
                        <el-button type="warning" @click="isShowChild = true">驳回</el-button>
                    </div>
                </el-form>
                <el-dialog
                    :visible.sync="isShowChild"
                    center
                    title="驳回理由"
                    width="30%"
                    append-to-body
                    @close="$refs['form'].resetFields()"
                >
                    <el-form
                            :model="rejectText"
                            label-position="left"
                            label-width="80px"
                            ref="form"
                    >
                        <el-form-item
                                label="驳回理由"
                                prop="text"
                                :rules="[
                                    {required: true, message: '请输入驳回理由', trigger: 'blur'}
                                ]"
                        >
                            <el-input v-model="rejectText.text" style="width:55%;margin-right:5%;"></el-input>
                            <el-button type="danger" @click="reject">驳回</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-dialog>
        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "increase",
        components: {
            tableDataEl
        },
        data () {
            return {
                page: 1,
                pageSize: 8,
                tableData: {},
                tableLabel: [
                    {
                        label: '运营商名称',
                        prop: 'company',
                        empty: true
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '负责人',
                        prop: 'leader',
                        empty: true
                    },
                    {
                        label: '押金金额',
                        prop: 'price'
                    },
                    {
                        label: '支付凭证',
                        prop: 'usecost',
                        image: true
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '操作',
                        detail: true,
                        btnText: '查看',
                        methodName: 'handleDetail'
                    }
                ],
                isShowDetail: false,
                obj: {
                    mate: []
                },
                isShowChild: false,
                rejectText: {
                    text: ''
                },
                aid: '',
                id: '',
                loading: false
            }
        },
        methods: {
            async init (search = '') {  //初始化
                this.loading = true;
                let paramsStr = Object.assign(search, {page: this.page,pageSize: this.pageSize});
                let res = await this.api.addMateAuditList(paramsStr);
                res.code ? this.tableData = res.data : this.$message(res.msg);
                this.loading = false;
            },
            async handleDetail(...value) {  //查看详情
                let temp = value[1];
                this.aid = temp['aid'];
                this.id = temp['id'];
                Object.assign(this.obj,{aid: temp['aid'],id: temp['id'],regions: temp['regions'],price: temp['price']});
                this.isShowDetail = true;
                let res = await this.api.commonOil();
                res.code ? this.obj.mate = res.data : this.$message(res.msg);
            },
            async through () { //通过操作
                let res = await this.api.adoptAudit(this.obj);
                this.$message({
                    type: res.code ? 'success' : 'error',
                    message: res.msg
                });
                this.init();
                this.isShowDetail = false;
            },
            async reject () { //驳回操作
                let flag = true;
                this.$refs['form'].validate((valid) => {
                    !valid ? flag = false : flag
                })
                if(flag) {
                    let res = await this.api.rejectAudit(Object.assign({},{aid: this.aid,id: this.id,reason: this.rejectText.text}));
                    this.$message({
                        type: res.code ? 'success' : 'error',
                        message: res.msg
                    });
                    this.init();
                    this.isShowChild = false;
                    this.isShowDetail = false
                }


            }
        },
        mounted () {
            this.init()
        }
    }
</script>

<style scoped>
    .pad {
        padding: 10px;
    }
</style>
